<template>
    <div class="content">
        <TableLayout form-title="">
            <el-form :model="formInline" class="formInline" label-width="100px" :rules="rules" ref="formInline" slot="form">          
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称">
                            <school v-model="formInline.schoolName" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                    </el-col> 

                    <el-col :span="8">
                        <el-form-item label="家长手机号" prop="sPayUserPhone">
                            <el-input v-model="formInline.sPayUserPhone" placeholder="请输入内容" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="支付人">
                            <el-input v-model="formInline.userName" placeholder="请输入内容" :maxlength="10"></el-input>
                        </el-form-item>
                    </el-col> 
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="支付方式">
                            <el-select v-model="formInline.payType" placeholder="请选择" style="width:100%" @change="changeType">
                                <el-option v-for="item in formInline.payTypeList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="打包商品名称">
                            <el-select v-model="formInline.goodsType" placeholder="请选择" style="width:100%" @change="changeType">
                                <el-option v-for="item in formInline.goodsTypeList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                          
                </el-row>
                <div class="top-line">
                    <el-button type="primary" @click="onSubmit('formInline')">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="oder-info">
                <el-form :model="formOder" class="formOder" label-width="100px" :rules="rules" ref="formOder">
                
                <el-row :gutter="41">
                   <el-col :span="8">
                        <el-form-item label="月份" prop="month">
                            <el-date-picker v-model="formInline.month" type="month" placeholder="选择月" style="width:100%" @change = "changeVipOrderStatistics"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>  

                <el-row class="infomation">
                    <el-col :span="4">
                        <div class="info-name">订单量</div>
                        <div class="info-num">{{formInline.orderNum}}</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="info-name">会员分成（元）</div>
                        <div class="info-num">{{formInline.activationCodeOrderNum}}</div>
                    </el-col> 
                    <el-col :span="5">
                        <div class="info-name">报平安分成（元）</div>
                        <div class="info-num">{{formInline.agentMoney}}</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="info-name">e直播分成（元）</div>
                        <div class="info-num">{{formInline.eXueMoney}}</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="info-name">分成总额（元）</div>
                        <div class="info-num">{{formInline.totalMoney}}</div>
                    </el-col>
                </el-row>
                </el-form>
            </div>
            <div class="table-title" slot="table-title">               
                <div class="btnPosition">
                    <el-button  @click="exportBtn">导出</el-button>
                </div>
            </div>
            <el-table :data="dataApply" style="width: 100%" border @selection-change="handleSelectionChange" v-loading="loading" ref="multipleTable">

                <el-table-column label="学校名称" align="center"  prop="schoolName">
                    <template scope="scope">
                        <span>{{scope.row.schoolName | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="打包商品名称" align="center"  prop="schoolName">
                    <template scope="scope">
                        <span>{{scope.row.packIncrementName | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="支付金额（元）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.money | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="会员分成（元）" align="center"  prop="schoolName">
                    <template scope="scope">
                        <span>{{scope.row.vipDividedMoney | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="报平安分成（元）" align="center" prop="schoolType" width="100">
                    <template scope="scope">
                        <span>{{scope.row.keepPeaceDividedMoney | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="e直播分成（元）" align="center" prop="schoolType" width="100">
                    <template scope="scope">
                        <span>{{scope.row.broadcastDividedMoney | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="支付人" align="center" prop="schoolType" width="100">
                    <template scope="scope">
                        <span>{{scope.row.payUserName | isNull}}</span>
                    </template>
                </el-table-column>
 
                <el-table-column label="支付方式" align="center" prop="belongToArea" width="170">
                    <template scope="scope">
                        <span>{{scope.row.payType == '1' ? 'e学云' : scope.row.payType == '2' ? '支付宝' : scope.row.payType == '3' ? '微信' : '激活码' }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="家长手机号" align="center" prop="belongToArea" width="170">
                    <template scope="scope">
                        <span>{{scope.row.payUserPhone | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="购买月数" align="center" prop="belongToArea" width="170">
                    <template scope="scope">
                        <span>{{scope.row.month | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="支付时间" align="center" prop="detail" width="170">
                    <template scope="scope">
                        <span>{{scope.row.createTime | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="操作" align="center" prop="createTime"> 
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="check(scope.row.id)">查看详情</el-button>
                    </template>
                </el-table-column>               
           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="+listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>
 
<script>
// import { pageVipMemberShipPayDetail, countVipMemberShipPayDetail} from 'api/memberMangement';
import { mapState, mapActions, mapGetters } from 'vuex';
import TableLayout from './index';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import school from 'components/SchoolClasss/school';
import Cookies from 'js-cookie';
import {pagePackPayDetail, listPackPayDetail, listProductPackManage} from 'api/numberManagement';
import moment from 'moment';
import validate from '@/utils/validate';
 
export default{
    components: {TableLayout, province, city, region, school},
    data() {
        return {
            formInline: {// form表单数据
                userName: '',
                fProvinceId: '',
                fAreaId: '',
                fCityId: '',
                sPayUserPhone: '',
                schoolId: '',
                schoolName: '',
                dateNum: '',
                totalMoney: '--',
                orderNum: '--',
                onlineOrderNum: '--',
                activationCodeOrderNum: '--',
                eXueMoney: '--',
                agentMoney: '--',
                pickerOptions1: '',
                month: '',
                payType: '',
                payTypeList: [
                    {
                        name: '请选择',
                        id: ''
                    },
                    {
                        name: 'e学云',
                        id: '1'
                    },
                    {
                        name: '支付宝',
                        id: '2'
                    },
                    {
                        name: '微信',
                        id: '3'
                    }
                ],
                goodsTypeList: [
                ],
                goodsType: ''
            },
            formOder: {
                userName: ''
            },
            dataApply: [],
            dataNum: 1, // 表格1显示条数，初始为1
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: false,
            rules: {
                sPayUserPhone: [...validate.phone()]
            }
        }
    },
   
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters([
            'uid'
        ])
    },
    // 初始化
    created() {
        this.searchFetchData();
        this.getCountVip();
        this.changeVipOrderStatistics();
    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 获取学校id
        schoolChange(val) {
            this.formInline.schoolId = val
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },
        changeVipOrderStatistics() {
            console.log(this.formInline.month, 'ssssssssss')
            let month = this.formInline.month=='' ? '':moment(this.formInline.month).format('YYYY-MM');
            listPackPayDetail(month).then(res => {
                this.formInline.orderNum = res.data.content.orderCount;
                this.formInline.activationCodeOrderNum = res.data.content.vipDivided;
                this.formInline.totalMoney = res.data.content.totalDivided;
                this.formInline.eXueMoney = res.data.content.broadcastDivided;
                this.formInline.agentMoney = res.data.content.keeppeaceDivided;
            })
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            pagePackPayDetail(this.listQuery.page, this.config.pageSize, this.formInline.schoolId, this.formInline.sPayUserPhone, this.formInline.userName, this.formInline.payType, this.formInline.goodsType).then(response => {              
                this.dataApply = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false;
            });
        },
        changeType() {
            this.formInline.dateNum = '';
        },
        // 统计会员订单
        getCountVip() {
            listProductPackManage().then(response => {              
                this.formInline.goodsTypeList = response.data.content;
                this.formInline.goodsTypeList.unshift(
                    {
                        name: '请选择',
                        id: ''
                    }
                )
            });
        },
        // 表单查询
        onSubmit() {
            this.$refs['formInline'].validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                    this.getCountVip();
                } else {
                    return false;
                }
            });
        },
        check(id) {
            this.$router.push({path: `packingOrderDetail/${id}`});
        },
        exportBtn() {
            let Token = Cookies.get('accessToken');
            window.location.href = `${LOCAL_API.bsp}/vip/exportPackPayDetail?token=${Token}&schoolId=${this.formInline.schoolId}&payUserPhone=${this.formInline.sPayUserPhone}&payUserName=${this.formInline.userName}&payType=${this.formInline.payType}&packIncrementId=${this.formInline.goodsType}`;
        }
 
    }
}
</script>
<style lang="scss" scoped>
 
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }
    .el-tag{
        margin-left:5px;
        background:#f9f9f9;
        color:#444;
    }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .formOder{
        width:100%;
    }
    .table-box{
        color: #333;
        font-size: 14px;
        padding: 10px 0;
        line-height: 20px;
    }
    .info-name{
        font-size: 17px;
        color: #999;
        padding-bottom:33px
    }
    .info-num{
        font-size: 25px;
        color: #343434;
    }
    .infomation{
        width:100%;
        margin-top:30px;
        text-align:center;
    }
}
</style>